<template>
  <div v-if="cartList.length > 0">
    <el-row class="title">
      <el-col :span="2">
        <el-checkbox  label="全选" v-model="checkAllState" @change="checkAllOrNone" :indeterminate="halfState"/>
      </el-col>
      <el-col :span="11">商品</el-col>
      <el-col :span="2">单价</el-col>
      <el-col :span="6">数量</el-col>
      <el-col :span="2">小计</el-col>
      <el-col :span="1">操作</el-col>
    </el-row>
    <el-row v-for="(cart,index) in cartList" :key="index" class="cartItem">
      <el-col :span="2">
        <el-checkbox  v-model="cart.checkState" @change="changeState"/>
      </el-col>
      <el-col :span="2">
        <el-image
            style="height: 50px; width: 50px"
            fit="contain"
            :src="`${SERVER_ADDR}/goods/pic/${cart.goods.picList[0].url}`"/>
      </el-col>
      <el-col :span="5">{{ cart.goods.name }}</el-col>
      <el-col :span="4">{{ cart.goods.color}} - {{ cart.goods.version}}</el-col>
      <el-col :span="2">{{ cart.goods.price }}</el-col>
      <el-col :span="6"><el-input-number v-model="cart.count" :min="1" size="small" @change="updateCount(cart)"/></el-col>
      <el-col :span="2">{{ cart.goods.price * cart.count }}</el-col>
      <el-col :span="1"><el-button type="danger" :icon="Delete" circle  @click="deleteById(cart.id)"/></el-col>
    </el-row>
    <el-row class="cartFooter">
      <el-col :span="2">
        <el-checkbox  label="全选" v-model="checkAllState" @change="checkAllOrNone" :indeterminate="halfState"/>
      </el-col>
      <el-col :span="3">
        <el-link :underline="false" @click="deleteChecked">删除选中商品</el-link>
      </el-col>
      <el-col :span="11">
        <el-link :underline="false" @click="deleteAll">清理购物车</el-link>
      </el-col>
      <el-col :span="3">已选{{ checkedCount }}件商品</el-col>
      <el-col :span="3">总价:￥{{total.toFixed(2)}}</el-col>
      <el-col :span="2"><el-button type="danger" @click="toCreateOrderPage">结算</el-button></el-col>

    </el-row>
  </div>
  <div v-else class="none">
    <i class="iconfont icon-gouwuche" style="font-size: 60px;color:red"></i>购物车空空如也，去选择商品吧~ <RouterLink  to="/user/index">商城首页</RouterLink>
  </div>
</template>

<script setup>
import {ref} from "vue";
import cartApi from "@/api/cartApi.js";
import {Delete} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";
const router = useRouter();
//服务器地址
const SERVER_ADDR = ref(import.meta.env.VITE_SERVER_ADDR)
//当前用户所有的购物车信息
const cartList = ref([]);
//全选按钮是否选中
const checkAllState = ref(false);
//没有全选状态
const halfState = ref(false);
//选中商品的数量
const checkedCount = ref(0);
//选中商品的总金额
const total = ref(0);

//删除已选择的购物车
function deleteChecked(){
  let ids = [];
  cartList.value.forEach(cart => {
    if(cart.checkState){
      ids.push(cart.id)
    }
  });
  if(ids.length == 0){
    ElMessage.warning("购物车中无商品，无法删除")
    return
  }
  //批量删除
  cartApi.deleteByIds(ids)
      .then(resp => {
        if(resp.code == 10000){
          ElMessage.success(resp.msg)
          cartList.value = cartList.value.filter(cart => !cart.checkState)
          //重新设置全选按钮的状态 - 重新计算总金额和数量
          changeState()
        }else {
          ElMessage.error(resp.msg)
        }
      })
}

//清空购物车 - 删除所有
function deleteAll(){
  let ids = [];
  cartList.value.forEach(cart => {
    ids.push(cart.id)
  });
  if(ids.length == 0){
    ElMessage.warning("购物车中无商品，无法删除")
    return
  }
  //批量删除
  cartApi.deleteByIds(ids)
      .then(resp => {
        if(resp.code == 10000){
          ElMessage.success(resp.msg)
          //重新获取购物车列表
          selectCartList()
          //重新设置全选按钮的状态 - 重新计算总金额和数量
          changeState()
          halfState.value = false;
        }else {
          ElMessage.error(resp.msg)
        }
      })
}
//计算选中商品的数量和金额
function getCountAndTotal(){
  checkedCount.value = 0;
  total.value = 0;
  cartList.value.forEach(cart => {
    if(cart.checkState){
      checkedCount.value += cart.count;//计算被选中商品的数量
      total.value += cart.goods.price * cart.count;//计算商品总价
    }
  });
}

//购物车项前多选按钮状态发送变化时调用的函数
function changeState(){
  /*
  设置全选按钮的状态
  1.如果所以都被选中，就设置全选按钮为选中
  1.如果所以都未被选中，就设置全选按钮为未选中
   */
  let count = 0;//被选中checkbox数量
  cartList.value.forEach(cart => {
    if(cart.checkState){
      count++;//计算被选中checkbox数量
    }
  });
  if(count == cartList.value.length){
    checkAllState.value = true;
    halfState.value = false;
  }else if(count == 0){
    checkAllState.value = false;
    halfState.value = false;
  }else {
    halfState.value = true;
  }
  getCountAndTotal();
}

//全选 - 全不选
function checkAllOrNone(){
  //让每个购物车项前面的多选按钮的状态和全选按钮状态保持一致
  cartList.value.forEach(cart => {
    cart.checkState = checkAllState.value
  });
  halfState.value = false;
  getCountAndTotal();

}
//查询当前用户所有的购物车信息
function selectCartList(){
  cartApi.selectCartList()
      .then(resp => {
        cartList.value = resp.data
        cartList.value.forEach(cart => {
          cart.checkState = false
        });
      })
}
//根据id删除
function deleteById(id){
  cartApi.delete(id)
      .then(resp => {
        if(resp.code == 10000){
          ElMessage.success(resp.msg);
          //将被删除的项从cartList中清除
          cartList.value = cartList.value.filter(cart => cart.id != id);
          //设置全选按钮的状态
          changeState();
          getCountAndTotal();
        }else {
          ElMessage.error(resp.msg)
        }
      })
}
//修改购物车商品数量
function updateCount(cart){
  const cartInfo = {
    id:cart.id,
    count:cart.count
  }
  cartApi.update(cartInfo)
      .then(resp => {
        if(resp.code == 10000){
          //让购物车中商品数量和数据库中保持一致
          cartApi.selectById(cartInfo.id)
              .then(resp => {
                cartList.value.forEach(cart => {
                  if(cart.id == cartInfo.id){
                    cart.count = resp.data.count;
                  }
                })
                getCountAndTotal();
              })
        }else {
          ElMessage.error(resp.msg)
        }
      })
}
//跳转到生成订单的页面
function toCreateOrderPage(){
  //获取已选中购物车ID
  let cartIds = [];
  cartList.value.forEach(cart => {
    if(cart.checkState){
      cartIds.push(cart.id)
    }
  });
  if(cartIds.length == 0){
    ElMessage.warning("您还没有选择商品，无法进行结算")
    return;
  }

  router.push({
    path:'/user/createOrder',
    query:{
      cartIds
    }
  })
}

selectCartList();
</script>

<style scoped>
.title,.cartFooter {
  margin: 20px 0;
  padding-left: 10px;
  font-size: 14px;
  background-color: #FFF;
  line-height: 40px;
  height: 40px;

}
.cartItem{
  margin-bottom: 5px;
  padding-left: 10px;
  font-size: 14px;
  background-color: #FFF;
  height: 50px;
  line-height: 50px;
}
.none{
  font-size: 20px;
  line-height: 300px;
  height: 300px;
  background-color: #FFF;
  text-align: center;
}
</style>